<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <router-link 
          replace
          :to="{
            name:'xiangqing',
            query:{
              id:m.id,
              title:m.title,
              content:m.content,
            }
          }"
        >
          {{m.title}}
        </router-link>
        <button @click="toDetail(m)">查看</button>
      </li>
    </ul>
    <div class="panel panel-body panel-primary">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Message',
    data() {
      return {
        messageList:[
          {id:'wfqyteyu1',title:'《来自缅北的一封信》',content:'我在缅北等你来赚大钱'},
          {id:'wfqyteyu2',title:'《如何一夜暴富》',content:'好好学习'},
          {id:'wfqyteyu3',title:'《高新诚聘前端》',content:'面向Ak47编程'}
        ]
      }
    },
    methods: {
      toDetail(m){
        this.$router.replace({
          name:'xiangqing',
          query:{
            id:m.id,
            title:m.title,
            content:m.content,
          }
        }).catch(()=>{})
      }
    },
  }
</script>